<template>
  <div>
    <a @click="onToggle" class="toggleLink">{{ text }}</a>
    <div v-show="show">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref} from "vue";

export default defineComponent({
  setup() {
    const show = ref(false)
    const text = ref('显示源码')
    const onToggle = () => {
      show.value = !show.value;
      text.value = show.value ? '隐藏源码' : '显示源码';
    }
    return {
      show, text, onToggle
    }
  }
})
</script>

<style scoped>
.toggleLink {
  cursor: pointer;
}
</style>